<template>
    <div>
        <div>
            <Form :ruleForm="ruleForm" :serachs="serachs":resets="resets" />
        </div>
        <div class="tai">
            <Alert :render="render" />
        </div>
        <div>
            <Table :tableData="tableData" :render="render" />
        </div>
    </div>


</template>
<script setup lang="ts">
import Table from '@/components/table.vue';
import { ref, onMounted, reactive } from 'vue';
import Rest from '@/api/request'
import { ElMessageBox, ElMessage } from 'element-plus'

let tableData = ref([])
const render = () => {
    Rest.get('/list').then(res => {
        tableData.value = res.data
    })
}
onMounted(() => {
    render()
})
const ruleForm = reactive<any>({
    username: '',
    name: '',
    status: '',
})
import Alert from '../components/Alert.vue'
import Form from '../components/Form.vue'

const serachs = () => {
    if (ruleForm.name == '' && ruleForm.username == '' && ruleForm.status == '') {
        ElMessage({
            message: '请输入搜索内容',
            type: 'warning',
        })
    } else {
        Rest.get(`/list?username_like=${ruleForm.username}&name_like=${ruleForm.name}&status_like=${ruleForm.status}`).then(res => {
            tableData.value = res.data
        })
    }
}
const resets=()=>{
    ruleForm.username=''
    ruleForm.name=''
    ruleForm.status=''
    render()
}

</script>

<style scoped>
.tai {
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>